<template>
  <div class="web-header w-global-color-bg">
    <el-menu
      :default-active="pageindex"
      class="w-content-box"
      mode="horizontal"
      text-color="#fff"
      background-color="#545c64"
      active-text-color="#ffd04b"
      @select="handleSelect">
      <el-menu-item index="home">首页</el-menu-item>
      <el-menu-item index="resume">个人介绍</el-menu-item>
      <el-menu-item index="conclusion">学习</el-menu-item>
      <el-menu-item index="works">作品</el-menu-item>
      <el-menu-item index="package">封装</el-menu-item>
      <el-menu-item index="opinion">意见/建议</el-menu-item>
      <el-menu-item index="tool">工具</el-menu-item>
      <el-menu-item
        index="admin"
        class="admin w-flex-center">
        <img class="nav-icon" src="@/assets/global/user.png" alt="">
        <span
          v-if="user.isGetUser"
          class="name">{{ user.name }}</span>
      </el-menu-item>
      <el-menu-item
        index="api"
        class="api w-flex-center">
        <span class="name">API</span>
      </el-menu-item>
      <el-menu-item
        index="api"
        class="api w-flex-center">
        <el-popover
          placement="top-start"
          width="670"
          trigger="hover">
            <w-clock :w="670" :h="120"/>
            <img slot="reference" class="nav-icon" src="@/assets/global/clock.png" alt="">
        </el-popover>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { Getter } from 'vuex-class'
import WClock from '@/components/global/clock/index.vue'
import { Component, Vue, Watch } from 'vue-property-decorator'
import { UserInfo } from '@/pages/pc/store/modules/user'
import { Route } from 'vue-router'

@Component({
  components: {
    WClock,
  },
})
export default class WebHeader extends Vue {
  // 用户数据
  @Getter('user') private user!: UserInfo

  // 当前分页
  private pageindex = '1'

  private mounted() {
    this.changePageIndex(this.$route)
  }

  // 导航栏选择点击
  private handleSelect(e: string) {
    switch (e) {
      case 'home':
        this.$router.push({ name: 'WebHome' })
        break
      case 'resume':
        this.$router.push({ name: 'WebResume' })
        break
      case 'conclusion':
        this.$router.push({ name: 'WebConclusion' })
        break
      case 'works':
        this.$router.push({ name: 'WebWorks' })
        break
      case 'package':
        this.$router.push({ name: 'WebPackage' })
        break
      case 'opinion':
        this.$router.push({ name: 'WebOpinion' })
        break
      case 'tool':
        this.$router.push({ name: 'WebTool' })
        break
      case 'admin':
        this.$router.push({ name: 'Admin' })
        break
      case 'api':
        window.open('/docs/api')
        break
      default:
        break
    }
  }

  // 改变路由
  private changePageIndex(router: Route) {
    this.pageindex = router.meta.index
  }

  @Watch('$route')
  private routerChange(val: Route, oldVal: Route) {
    this.changePageIndex(val)
  }
}
</script>

<style lang="scss" scoped>
.web-header {
  .w-content-box {
    border-bottom: none;
    .admin {
      float: right;
      font-size: 30px;
      .name {
        font-size: 20px;
      }
    }
    .nav-icon {
      width: 24px;
    }
    .api {
      float: right;
      font-size: 20px;
    }
  }
}
</style>
